<template>
    <el-collapse style="width: 100%" @change="collapseChange" v-model="activeName" accordion>
                <el-collapse-item v-for="(item, index) in timeLineArr" :key="index" :title="item" :name="item">
                    <el-tag
                            @click="chooseCurrent(m)"
                            style="margin-top: 4px; margin-left: 16px"
                            v-for="(m, index) in monthArr"
                            :key="index"
                            :type="m.type"
                            effect="plain">
                        {{ m.month }} 月
                    </el-tag>
                </el-collapse-item>
            </el-collapse>
</template>

<script>
    export default {
        name: "TimeLine",
        data() {
            return {
                currentType: 'info',
                activeName: '1',
                timeLineArr: [],
                monthArr: [
                    {'month':'1', 'parentId':'', 'type':'info'},
                    {'month':'2', 'parentId':'', 'type':'info'},
                    {'month':'3', 'parentId':'', 'type':'info'},
                    {'month':'4', 'parentId':'', 'type':'info'},
                    {'month':'5', 'parentId':'', 'type':'info'},
                    {'month':'6', 'parentId':'', 'type':'info'},
                    {'month':'7', 'parentId':'', 'type':'info'},
                    {'month':'8', 'parentId':'', 'type':'info'},
                    {'month':'9', 'parentId':'', 'type':'info'},
                    {'month':'10', 'parentId':'', 'type':'info'},
                    {'month':'11', 'parentId':'', 'type':'info'},
                    {'month':'12', 'parentId':'', 'type':'info'},
                ]
            };
        },
        mounted() {
            var year = new Date().getFullYear();
            for (let i = 2017; i <= year; i++) {
                this.timeLineArr.push(i.toString())
            }
        },
        methods: {
            collapseChange(row) {
               // console.log(row)
                for (let i = 0; i < 12; i++) {
                    this.monthArr[i].parentId = row
                    this.monthArr[i].type = 'info'
                }
               // console.log(this.monthArr)
            },
            chooseCurrent(data) {
                console.log(data)
                var filter = this.monthArr.filter(info => info.month === data.month);
                const index = filter[0].month.substring(0, filter[0].month.length)
              //  console.log(filter[0].month.substring(0, filter[0].month.length))
                this.monthArr[index - 1].type = 'danger'
                let numbers = [
                   1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
                ]
                var filterNums = numbers.filter(number => number != index);
              //  console.log(filterNums)
                for (let i in filterNums) {
                   // console.log(filterNums[i])
                    this.monthArr[filterNums[i]-1].type = 'info'
                }
            }
        }
    };
</script>
